<template>
  <el-card>
    <!-- 修改手机号 -->
    <div v-if="id == 2">
    <!-- 新手机号 -->
      <div v-if="nexttype==2">
      <el-form :model="phoneForm" ref="phoneForm" :rules="phone_rules">
        <el-form-item prop="mobile">
          <div class="item f-row ai-c">
            <div class="left">新手机号:</div>
            <div class="right">
              <el-input
                placeholder="请输入新手机号码"
                v-model="phoneForm.mobile"
              >
              </el-input>
            </div></div
        ></el-form-item>
        <el-form-item>
          <div class="item f-row ai-c">
            <div class="left">验证码:</div>
            <div class="right pt-re">
              <el-input placeholder="请输入验证码"   max="6" v-model="phoneForm.code">
              </el-input>
            </div>
            <div
              class="code btn-deep"
              v-if="timerTf"
              @click="sendCode('phoneForm')"
            >
              发送验证码
            </div>
            <div class="code btn-deep" v-else>
              {{ countDownNum }}秒后重新获取
            </div>
          </div></el-form-item
        >
        <el-form-item>
          <div class="item f-row ai-c">
            <div class="left"></div>
            <div class="right">
              <div class="btn-deep" @click=" submitPhoneForm">保存</div>
              <div class="btn-light" @click="$router.go(-1)">取消</div>
            </div>
          </div></el-form-item
        >
      </el-form></div>
      <div v-if="nexttype==1">
         <!-- 旧手机号 -->
      <el-form :model="oldphoneForm" ref="oldphoneForm" :rules="oldphone_rules">
        <el-form-item prop="mobile">
          <div class="item f-row ai-c">
            <div class="left">旧手机号:</div>
            <div class="right">
              <el-input
                placeholder="请输入旧手机号码"
                v-model="oldphoneForm.mobile"
              >
              </el-input>
            </div></div
        ></el-form-item>
        <el-form-item>
          <div class="item f-row ai-c">
            <div class="left">验证码:</div>
            <div class="right pt-re">
              <el-input placeholder="请输入验证码"  max="6" v-model="oldphoneForm.code">
              </el-input>
            </div>
            <div
              class="code btn-deep"
              v-if="oldtimerTf"
              @click="oldsendCode('oldphoneForm')"
            >
              发送验证码
            </div>
            <div class="code btn-deep" v-else>
              {{ oldcountDownNum }}秒后重新获取
            </div>
          </div></el-form-item
        >
        <el-form-item>
          <div class="item f-row ai-c">
            <div class="left"></div>
            <div class="right">
              <div class="btn-deep" @click="submitPhoneFormOld">下一步</div>
              <div class="btn-light" @click="$router.go(-1)">取消</div>
            </div>
          </div></el-form-item
        >
      </el-form></div>
    </div>
    <!-- 修改密码 -->
    <div v-else-if="id == 1">
      <el-form ref="setPsw" :model="setPsw" :rules="setPsw_rules">
        <el-form-item prop="password">
          <div class="item f-row ai-c">
            <div class="left">原密码:</div>
            <div class="right">
              <el-input
                placeholder="请输入原密码"
                show-password
                v-model="setPsw.password"
              >
              </el-input>
            </div></div
        ></el-form-item>
        <el-form-item prop="newPassword">
          <div class="item f-row ai-c">
            <div class="left">新密码:</div>
            <div class="right">
              <el-input
                placeholder="请输入新密码"
                show-password
                v-model="setPsw.newPassword"
              >
              </el-input>
            </div></div
        ></el-form-item>
        <el-form-item prop="againPws">
          <div class="item f-row ai-c">
            <div class="left">确认新密码:</div>
            <div class="right">
              <el-input
                show-password
                placeholder="请输入再次输入新密码"
                v-model="setPsw.againPws"
              >
              </el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="item f-row ai-c">
            <div class="left"></div>
            <div class="right">
              <div class="btn-deep" @click="submitPswForm('setPsw')">保存</div>
              <div class="btn-light" @click="$router.go(-1)">取消</div>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>
<script>
import { set_psw, set_phone, emit_code, login_infofn ,oldMobild,old_phone} from "@/request/api";
export default {
  data() {
    var validatePhone = (rule, value, callback) => {
      const regMobile =
        /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
      if (value === "") {
        callback(new Error("请输入手机号码"));
      } else if (!regMobile.test(value)) {
        callback(new Error("请输入正确的手机号码"));
      } else {
        callback();
      }
    };
    var validateAgain = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入再次输入新密码"));
      } else if (value !== this.setPsw.newPassword) {
        callback(new Error("两次密码不一样"));
      } else {
        callback();
      }
    };
    return {
      nexttype:1,
      oldtimerTf: true,
      oldtimer: null,
      timerTf: true,
      timer: null,
      oldcountDownNum:null,
      countDownNum: null, //倒计时
      id: null, //1  手机号修改  2密码修改
      setPsw: {
        password: "",
        newPassword: "",
        againPws: "",
      },
      phoneForm: {
        currnetmobile: "",
        mobile: "",
        code: "",
      },
      oldphoneForm: {
        currnetmobile: "",
        mobile: "",
        code: "",
      },
      phone_rules: {
        mobile: [{ validator: validatePhone, trigger: "blur" }],
      },
      oldphone_rules: {
        mobile: [{ validator: validatePhone, trigger: "blur" }],
      },
      setPsw_rules: {
        password: [
          {
            min: 6,
            max: 18,
            message: "长度在 6 到 18 个字符",
            trigger: "blur",
          },
          { required: true, message: "请输入旧密码", trigger: "blur" },
        ],
        newPassword: [
          {
            min: 6,
            max: 18,
            message: "长度在 6 到 18 个字符",
            trigger: "blur",
          },
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        againPws: [
          {
            min: 6,
            max: 18,
            message: "长度在 6 到 18 个字符",
            trigger: "blur",
          },
          { validator: validateAgain, trigger: "blur" },
        ],
      },
    };
  },
  created() {
    if (this.$route.params.id) {
      this.id = this.$route.params.id;
    } else {
      this.$router.go(-1);
    }
  },
  methods: {
    nextStepBtn(){
      if(this.nexttype){}
    },
    //老的发生验证码
    oldsendCode(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          emit_code(this.oldphoneForm.mobile)
            .then((res) => {
              if (res?.success) {
                this.$message({
                  message: res.message,
                  type: "success",
                });
                this.oldtimerTf = false;
                this.oldcountDownNum = 60;
                this.timer = setInterval(() => {
                  this.oldcountDownNum--;
                  if (this.oldcountDownNum <= 0) {
                    this.oldtimerTf = true;
                    clearInterval(this.oldtimer);
                  }
                }, 1000);
              }
            })
            .catch((err) => {
              console.log(err, "手机验证码发送失败");
            });
        } else {
          console.log("手机号校验失败");
        }
      });
    },
    //发生验证码
    sendCode(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          emit_code(this.phoneForm.mobile)
            .then((res) => {
              if (res?.success) {
                this.$message({
                  message: res.message,
                  type: "success",
                });
                this.timerTf = false;
                this.countDownNum = 60;
                this.timer = setInterval(() => {
                  this.countDownNum--;
                  if (this.countDownNum <= 0) {
                    this.timerTf = true;
                    clearInterval(this.timer);
                  }
                }, 1000);
              }
            })
            .catch((err) => {
              console.log(err, "手机验证码发送失败");
            });
        } else {
          console.log("手机号校验失败");
        }
      });
    },
    //老的修改手机号
    submitPhoneFormOld() {
      if(!this.oldphoneForm.mobile){
        this.$message.error('请输入手机号')
        return
      }else if(!this.oldphoneForm.code){
         this.$message.error('请输入验证码')
        return
      }
      old_phone(this.oldphoneForm.mobile, this.oldphoneForm.code)
        .then((res) => {
          if (res.code == 200) {
              if (res.code == 200) {
                this.nexttype=2
              }else{
                this.$message.error('旧手机号校验失败！')
              }
          }
        })
        .catch((err) => {
          console.log(err, "旧手机号校验错误");
        });
    },
    //修改新手机号
    submitPhoneForm() {
       if(!this.phoneForm.mobile){
        this.$message.error('请输入手机号')
        return
      }else if(!this.phoneForm.code){
         this.$message.error('请输入验证码')
        return
      }
      set_phone(this.phoneForm.mobile, this.phoneForm.code)
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            login_infofn().then((res) => {
              if (res.code == 200) {
                  this.$message({
                  message: "更新信息成功",
                  type: "success",
                });
                setTimeout(() => {
                  this.$router.go(-1);
                }, 1000);
                this.$store.commit("SETLOGININFO", res.result);
              }else{
                this.$message.error('校验失败请重试！')
              }
            });
          }
        })
        .catch((err) => {
          console.log(err, "手机号保存失败");
        });
    },
    //修改密码
    submitPswForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.setPsw.newPassword != this.setPsw.againPws) {
            this.$message.error("两次输入密码不一样");
          } else {
            set_psw(
              this.$md5(this.setPsw.password),
              this.$md5(this.setPsw.newPassword)
            ).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                setTimeout(() => {
                  this.$router.go(-1);
                }, 1000);
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    save() {
      if (this.id == 1) {
      } else if (this.id == 2) {
        if (this.setPsw.newPassword != this.setPsw.againPws) {
          this.$message.error("两次输入密码不一样");
        } else {
          set_psw().then((res) => {});
        }
      }
    },
  },
};
</script>
<style lang="less" scoped>
.code {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1rem;
}
.item {
  width: 34rem;
  display: grid;
  grid-template-columns: 1fr 25rem;
}
.el-card {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
/deep/.el-form-item__content {
  display: inline-block;
}
</style>